<template>
    <div class='nursing'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable size="small" @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
                        <el-option v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    <!-- v-hasPermi="['system:menu:add']" -->
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <!-- border -->
            <el-table v-loading="loading" :data="menuList" row-key="menuId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160">
                </el-table-column>
                <el-table-column prop="icon" label="图标" align="center" width="100">
                    <template slot-scope="scope">
                        <!-- <svg-icon :icon-class="scope.row.icon" /> -->
                    </template>
                </el-table-column>
                <el-table-column prop="orderNum" label="排序" align="center" width="60"></el-table-column>
                <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="80">
                    <template slot-scope="scope">
                        <span>{{ selectDictLabel(statusList, scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                            <!-- v-hasPermi="['system:menu:edit']" -->
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增
                            <!-- v-hasPermi="['system:menu:add']" -->
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                            <!-- v-hasPermi="['system:menu:remove']" -->
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
            <!-- 添加或修改菜单对话框 -->
            <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="上级菜单">
                                <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="菜单类型" prop="menuType">
                                <el-radio-group v-model="form.menuType">
                                    <el-radio label="M">目录</el-radio>
                                    <el-radio label="C">菜单</el-radio>
                                    <el-radio label="F">按钮</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item v-if="form.menuType != 'F'" label="菜单图标">
                                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                                    <IconSelect ref="iconSelect" @selected="selected" />
                                    <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                                        <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
                                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                                    </el-input>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜单名称" prop="menuName">
                                <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="显示排序" prop="orderNum">
                                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item v-if="form.menuType != 'F'" label="是否外链">
                                <el-radio-group v-model="form.isFrame">
                                    <el-radio label="0">是</el-radio>
                                    <el-radio label="1">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item v-if="form.menuType != 'F'" label="路由地址" prop="path">
                                <el-input v-model="form.path" placeholder="请输入路由地址" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="标识符" prop="index">
                                <el-input v-model="form.index" placeholder="请输入标识符" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.menuType == 'C'">
                            <el-form-item label="组件路径" prop="component">
                                <el-input v-model="form.component" placeholder="请输入组件路径" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item v-if="form.menuType != 'M'" label="权限标识">
                                <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item v-if="form.menuType != 'F'" label="显示状态">
                                <el-radio-group v-model="form.visible">
                                    <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col> -->
                        <!-- <el-col :span="12">
                            <el-form-item v-if="form.menuType != 'F'" label="菜单状态">
                                <el-radio-group v-model="form.status">
                                    <el-radio v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictValue">
                                        {{ dict.dictLabel }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col> -->
                        <!-- <el-col :span="12">
                            <el-form-item v-if="form.menuType == 'C'" label="是否缓存">
                                <el-radio-group v-model="form.isCache">
                                    <el-radio label="0">缓存</el-radio>
                                    <el-radio label="1">不缓存</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>
<script>
// import { } from "@/api/basic/system"
import { departStatus } from "@/api/dictionary"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
// import SvgIcon from '@/components/SvgIcon'
import throttle from 'lodash.throttle'
export default {
    name: 'nursing',
    props: {

    },
    components: {
        Treeselect,
        IconSelect,
        // SvgIcon
    },
    data() {
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            statusList: departStatus,
            title: "",
            open: false,
            // 显示状态数据字典
            visibleOptions: [],
            queryParams: {
                page: 1,
                limit: 20,

            },
            menuList: [
            ],
            menuOptions: [],
            form: {

            },
            // 表单校验
            rules: {
                menuName: [
                    { required: true, message: "菜单名称不能为空", trigger: "blur" }
                ],
                orderNum: [
                    { required: true, message: "菜单顺序不能为空", trigger: "blur" }
                ],
                path: [
                    { required: true, message: "路由地址不能为空", trigger: "blur" }
                ]
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            let data = [
                {
                    children: [],
                    component: null,
                    createTime: "2022-10-19 20:56:47",
                    icon: "system",
                    menuId: 1,
                    menuName: "系统管理",
                    menuType: "M",
                    orderNum: 1,
                    params: {},
                    parentId: 0,
                    parentName: null,
                    path: "system",
                    perms: "",
                    query: "",
                    remark: null,
                    searchValue: null,
                    status: "0",
                    updateBy: null,
                },
                {
                    children: [],
                    component: null,
                    createBy: null,
                    createTime: "2022-10-19 20:56:47",
                    icon: "monitor",
                    menuId: 2,
                    menuName: "系统监控",
                    menuType: "M",
                    orderNum: 2,
                    params: {},
                    parentId: 0,
                    parentName: null,
                    path: "monitor",
                    perms: "",
                    query: "",
                    remark: null,
                    searchValue: null,
                    status: "0",
                    updateBy: null,
                    updateTime: null,
                },
                {
                    children: [],
                    component: "system/user/index",
                    createBy: null,
                    createTime: "2022-10-19 20:56:48",
                    icon: "user",
                    menuId: 100,
                    menuName: "用户管理",
                    menuType: "C",
                    orderNum: 1,
                    params: {},
                    parentId: 1,
                    parentName: null,
                    path: "user",
                    perms: "system:user:list",
                    query: "",
                    remark: null,
                    searchValue: null,
                    status: "0",
                    updateBy: null,
                    updateTime: null,
                }, {
                    children: [],
                    component: "",
                    createBy: null,
                    createTime: "2022-10-19 20:56:48",
                    icon: "#",
                    menuId: 1001,
                    menuName: "用户新增",
                    menuType: "F",
                    orderNum: 2,
                    params: {},
                    parentId: 100,
                    parentName: null,
                    path: "",
                    perms: "system:user:add",
                    query: "",
                    remark: null,
                    searchValue: null,
                    status: "0",
                    updateBy: null,
                    updateTime: null,
                }
            ]
            this.menuList = this.handleTree(data, "menuId");
            // this.loading = true;
            // getServiceLists(this.queryParams).then(res => {
            //     this.menuList = res.data.lists;
            //     this.pageCount = res.data.pageCount;
            //     this.loading = false;
            // });
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row) {
            this.reset();
            this.getTreeselect();
            if (row != null && row.menuId) {
                this.form.parentId = row.menuId;
            } else {
                this.form.parentId = 0;
            }
            this.open = true;
            this.title = "添加菜单";
        },
        // 表单重置
        reset() {
            this.form = {
                menuId: undefined,
                parentId: 0,
                menuName: undefined,
                icon: undefined,
                menuType: "M",
                orderNum: undefined,
                status: "0"
            };
            this.resetForm("form");
        },
        /** 查询菜单下拉树结构 */
        getTreeselect() {
            // listMenu().then(response => {
            //     this.menuOptions = [];
            //     const menu = { menuId: 0, menuName: '主类目', children: [] };
            //     menu.children = this.handleTree(response.data, "menuId");
            //     this.menuOptions.push(menu);
            // });
            this.menuOptions = [];
            const menu = { menuId: 0, menuName: '主类目', children: [] };
            // menu.children = this.handleTree(response.data, "menuId");
            this.menuOptions.push(menu);
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.menuId,
                label: node.menuName,
                children: node.children
            };
        },
        // 选择图标
        selected(name) {
            this.form.icon = name;
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    console.log(this.form, "11111")
                    // if (this.form.menuId != undefined) {
                    //     updateMenu(this.form).then(response => {
                    //         this.msgSuccess("修改成功");
                    //         this.open = false;
                    //         this.getList();
                    //     });
                    // } else {
                    //     addMenu(this.form).then(response => {
                    //         this.msgSuccess("新增成功");
                    //         this.open = false;
                    //         this.getList();
                    //     });
                    // }
                }
            });
        },
    }
}
</script>

<style lang='scss' scoped>
</style>
